<!-- 
	date:2022-05-18
	author:xiaoya
	desc:用于报障选择人员页面
 -->
<template>
	<view>
		<view class="tree-wrapp">
			<view class="tree-item" v-for="(item, index) in tree" :key="index"
				:style="item.id ? '' : 'margin-bottom:16rpx'">
				<view class="head" v-if="item.id" @click.stop="changeShow(item)">
					<image src="/static/images/down_pie.png" :class="isOpen(item.id) ? 'rt45' : ''"
						mode="scaleToFill" class="left-icon" v-if="item.children && item.children.length > 0"></image>
					<!-- <view class="txt"  v-if="item.type === 2  && index === 0 && item.all">
						<text >{{ item.all }}</text>
					</view> -->
					<view class="txt">
						<text :style="{ color: item.isOpen ? '#0091FF;' : '' }">{{ item.title }}</text>

						<text v-if="item.type == 1 || item.showTotal">({{ item.total || 0 }})</text>
					</view>
					<view :class="[item.isOpen ? 'right-check right-bg' : 'right-check']" v-if="item.type == 2">
					</view>
				</view>
				<view class="content" v-if="item.children && item.children.length > 0" v-show="isOpen(item.id)">
					<treeNodes :tree="item.children" :expandedIds="expandedIds"
						@node-click="$emit('node-click', $event)"></treeNodes>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
import treeNodes from './tree-nodes.vue';
export default {
	name: 'treeNodes',
	// componentName: 'treeNodes',
	components: {
		treeNodes
	},
	props: {
		tree: {
			type: Array,
			default: ()=>[]
		},
		expandedIds: {
			type: Array,
			default: ()=>[]
		}
	},
	data() {
		return {
			// expandedIds:[],
			checkArr: [],
		};
	},
	watch: {
	},
	created() {
		this.tree.forEach((item, index) => { // 默认展开第一级
			if (index == 0) {
				this.expandedIds.push(item.id);
			}
		});
	},
	computed: {

	},
	methods: {
		isOpen(id) {// 判断节点id在不在数组中
			return this.expandedIds.includes(id);
		},
		changeShow(item) {
			if (item.children && item.children.length) {// 判断是否有子级
				let index = this.expandedIds.indexOf(item.id); 
				if (index != -1) {
					this.expandedIds.splice(index, 1);
				} else {
					this.expandedIds.push(item.id);
				}
			} else {
				let openstatus = item.isOpen;
				item.isOpen = !openstatus;// 是否勾选
			}
			this.$emit('node-click', item);
			this.$forceUpdate();
		}
	}
};
</script>

<style scoped lang="scss">
@mixin animate2 {
	-moz-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.tree-wrapp {}

.tree-item {
	padding: 10rpx 0rpx;
	padding-left: 10rpx;
	background-color: #fff;
	margin-bottom: 20rpx;

	.head {
		display: flex;
		align-items: center;
		line-height: 60rpx;

		.txt {
			font-size: 30rpx;
			color: #222;
			flex: 1;
		}
	}

	.right-ifon {
		margin-right: 30rpx;
		width: 30rpx;
		height: 30rpx;
		margin-left: 12rpx;
		transform: rotate(-90deg);
	}

	.right-check {
		margin-right: 30rpx;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 2rpx #CCCCCC solid;
	}

	.right-bg {
		// background-color: #0091FF;
		border: none;
		background: url("");
		background-size: 32rpx 32rpx;
		background-repeat: no-repeat;
	}

	.left-icon {
		margin-right: 16rpx;
		width: 22rpx;
		height: 22rpx;
		@include animate2;
		transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);

		&.rt45 {
			transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-o-transform: rotate(0deg);
		}
	}

	.content {
		padding-left: 40rpx;
	}
}
</style>
